<%@ page trimDirectiveWhitespaces="true" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>登录</title>
        <style type="text/css">
            <!--
            body {
                background-color: #f2f2f2;
            }
            image{border: none}
            ul, li{
                margin: 0;
                padding: 0;
                list-style-type:none;
            }
            #registerForm input.error { border: 2px solid red; }
            #registerForm label.checked {
                background:url("/images/login/checked.gif") no-repeat 0px 0px;
                padding-left: 20px;
                height: 25px;
                line-height: 25px;
                font-weight: bold;
                color: #99CC33;
            }
            #registerForm label.error{
                background:url("/images/login/unchecked.gif") no-repeat 0px 0px;
                padding-left: 20px;
                height: 25px;
                line-height: 25px;
                font-weight: bold;
                color: #EA5200;
            }
            .con_list >label{
                display: inline-block;
                vertical-align: inherit;
            }
            .con_list > span{
                display: inline-block;
                vertical-align: inherit;
            }
            #registerForm .input{ 
                height: 21px;
                line-height: 21px;
                border: 1px solid #329015;
                width: 225px;
            }
            #registerForm .select{ 
                height: 28px;
                line-height: 28px;
                padding:5px;
                border: 1px solid #329015;
                width: 225px;
            }
            #registerForm .input1{
                height: 21px;
                line-height: 21px;
                border: 1px solid #329015;
                width: 50px;
            }
            #actionerror{
                padding-left: 20px;
                font-weight: bold;
                color: #EA5200;
                height: 25px;
                line-height: 25px;
            }
            -->
        </style>
        <link rel="Shortcut Icon" href="/images/favicon.ico"/>
        <link rel="Bookmark" href="/images/favicon.ico"/>
        <link href="/css/css.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="/js/jquery.js"></script>
        <script type="text/javascript" src="/js/common.js"></script>
        <script type="text/javascript" src="/js/jquery.validate.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#registerForm").validate({
                    errorPlacement: function(label, element) {
                        if (element.is(":radio") ){
                            element.parent().next().next().html(label);
                        }else{
                            element.parent().children("span").html(label);
                        }
                    },
                    success: function(label) {
                        label.html("输入正确").addClass("checked").removeClass("error");
                    },
                    rules:{
                        nickName:{
                            required: true,
                            rangelength: [ 3, 20 ],
                            remote:"/userNameCheck.htm"
                        },
                        pwd:{
                            required: true,
                            rangelength: [ 3, 20 ]
                        },
                        checkpwd: {
                            required: true,
                            equalTo: "#pwd"
                        },
                        realName:{
                            maxlength:10
                        },
                        sex:{
                           required: true  
                        },
                        contract:{
                            required: true
                        },
                        email:{
                            required: true,
                            email: true// 验证条件：格式为email
                        }
                         
                    },
                    messages: {
                        nickName: {
                            required: "用户名不能为空",
                            rangelength: "用户名长度为{0}到{1}个字符",
                            remote:"该用户已经存在，请换别的用户名"
                         },
                         pwd:{
                            required: "密码不能为空",
                            rangelength: "密码长度为{0}到{1}个字符" 
                         },
                         checkpwd: {
                            required: "请再次填写密码",
                            equalTo: "两次输入的密码不一致"
                        },
                         realName:{
                             maxlength:"真实姓名的最大长度是10字符"
                         },
                        sex:{
                           required: "请选择性别"  
                        },
                        contract:{
                            required: "请输入手机号码，以便及时联系到你"
                        },
                        email:{
                            required: "邮箱地址不能为空",
                            email: "邮件地址格式错误"
                        }
                    }
                });
            });
            //表单提交注册
            function submitForm(){
                if($("#agreement").attr("checked") == false){
                    alert("同意接受Mongoose会员条款及相关制度才可以注册");
                }else{
                    $("#registerForm").submit();
                }
            }
        </script>
    </head>
    <body>
        <%@include file="../inc/top.jsp" %>
        <div class="main">
            <div class="con3"><img alt="pp01111" src="/images/pp0111.jpg" class="img" /></div>
            <div class="ccc">
                <div class="col3"> 
                    <h4><img alt="" src="images/004.gif" width="229" height="166"/></h4>
                </div>
                <form id="registerForm" name="registerForm" method="post" action="registerCheck.htm" class="form1">
                    <h3>创建一个Mongoose ID：</h3>  <p>欢迎加入Mongoose VIP俱乐部，本俱乐部系统暂时只对经销商客户开放，并实行实名验证，为保护您的切身利益，请认真填写以下内容（带<span style="color: red;">*</span>为必填项），您的个人资料我们会绝对保密，敬请放心。</p>
                    <!--<div id="actionerror"><s:actionerror/></div>-->
                    <div class="con_list">
                        <label>登 录 名：</label>
                        <s:textfield id="nickName" name="nickName"  cssClass="input"/>
                        <span><span style="color: red;">*</span>请输入3到20位的用户名</span>
                    </div>
                    <div class="con_list">
                        <label>密　　码：</label>
                        <s:password id="pwd" name="pwd" cssClass="input"/>
                        <span><span style="color: red;">*</span>请输入3到20位的密码</span>
                    </div>
                    <div class="con_list">
                        <label>密码确认：</label>
                         <s:password id="checkpwd" name="checkpwd" cssClass="input"/>
                        <span><span style="color: red;">*</span></span>
                    </div>
                    <div class="con_list">
                        <label>真实姓名：</label>
                        <s:textfield id="realName" name="realName" cssClass="input"/>
                        <span></span>
                    </div>
                    <div class="con_list">
                        <label>性　　别：</label>
                        <label><input type="radio" name="sex" id="male" value="male" checked="checked"/></label>男　
                        <label><input type="radio" name="sex" id="female" value="female" /></label>女
                        <span></span>
                    </div>
                    <div class="con_list">
                        <label>手　　机：</label>
                        <s:textfield id="contract" name="contract" cssClass="input"/>
                        <span><span style="color: red;">*</span></span>
                    </div>
                     <div class="con_list">
                        <label>E - MAIL：</label>
                        <s:textfield  name="email" id="email" cssClass="input"/>
                        <span><span style="color: red;">*</span></span>
                    </div>
                    <div class="con_list">
                        <label>Q　Q号码：</label>
                        <s:textfield cssClass="input" id="qq" name="qq"/>
                        <span></span>
                    </div>
                    <div class="con_list">
                        <label>生　　日：</label>
                        <input name="textfield8" type="text" class="input1" id="textfield8" size="6" />年 
                        <input name="textfield82" type="text" class="input1" id="textfield82" size="6" />月
                        <input name="textfield83" type="text" class="input1" id="textfield83" size="6" />日
                        <span></span>
                    </div>
                    <div class="con_list">
                        <label>省　　份：</label>
                       <!-- <select id="province" name="province" class="select">
                            <option>请选择省份</option>
                            <option>广西省</option>
                        </select>-->
                         <input name="textfield9" type="text" class="input" id="textfield9" size="40" />
                        <span><span style="color: red;">*</span></span>
                    </div>
                    <div class="con_list">
                        <label>城　　市：</label>
                       <!-- <select id="city" name="city" class="select">
                            <option>请选择城市</option>
                            <option>深圳市</option>
                        </select>-->
                        <input name="textfield10" type="text" class="input" id="textfield10" size="40" />
                        <span><span style="color: red;">*</span></span>
                    </div>
                    <div class="con_list">经营商场：
                        <input name="textfield11" type="text" class="input" id="textfield11" size="40" />
                    </div>
                    <div class="con_list">经营品牌：
                        <input name="textfield12" type="text" class="input" id="textfield12" size="40" />
                    </div>
                    <div class="con_list">通行地址：
                        <input name="textfield13" type="text" class="input" id="textfield13" size="60" />
                        *</div>
                    <div class="con_list">留　　言：
                        <br />
                        <textarea name="textfield14" rows="5" class="text1" id="textfield14"></textarea>
                    </div>
                    <div class="con_list">
                        <label>验证码：</label>
                        <s:textfield name="authCode" id="authCode" cssClass="input2" />
                        <img id="randomimg" src="/randomImage.htm" width="60" height="20" />
                        <a  href="javascript:void(0);" onclick="Common.reloadAttr('randomimg','src','/randomImage.htm');return false;">看不清</a>
                        <span></span>
                    </div>
                    <div class="con_list">
                        <input name="agreement " type="checkbox" id="agreement" checked="checked" />
                        已阅读并接受Mongoose会员条款及相关制度</div>
                    <div class="con_list">
                        <div align="left">
                            <a id="submit" name="submit" href="javascript:submitForm();" ><img src="/images/qrtj.gif"/></a>
                        </div>
                    </div>
                </form>
                <div class="clear"></div>
            </div>
        </div>
        <%@include file="../inc/foot.jsp" %>
    </body>
</html>